<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>
   Mastering Dojo - DOM Utilities Demonstration - Question List Challenge Step 1
  </title>
  
  <style type="text/css">
    @import "questions.css";
  </style>
  
  <script 
    type="text/javascript" 
    src="/dojoroot/dojo/dojo.js" 
    djConfig="isDebug: true">
  </script>

  <script type="text/javascript">
    (function(){
      //START:snip2
      function createNode(tag, className){
        var newNode= document.createElement(tag);
        dojo.addClass(newNode, className);
        return newNode;
      }
      //END:snip2 
      
      //START:snip1						
      function restructure(){
        var questionGroup= dojo.query("div.questions")[0];//note [0]!
        dojo.query("p", questionGroup).forEach(function(node){
          var question= createNode("div", "question");
          dojo.place(question, questionGroup, "last");
          dojo.query("span", node).forEach(function(choiceNode){
            var choice= createNode("p", "choice");
            dojo.place(choice, question, "last");
            dojo.place(choiceNode, choice, "last");
          });
          dojo.place(node, question, "last");
        });
      }
      //END:snip1            
      
      dojo.addOnLoad(function(){
        restructure();
        dojo.connect(document, "click", function(){
          console.log(dojo.coords("test", false));
        });
      });
    })();
  </script>
</head>
        
<body><div><form>
  <p>Programmer Interview Questions</p>
  <div class="questions">
    <p>
      <span><input type="radio" name="q1" value="yes">Yes</span>
      <span><input type="radio" name="q1" value="no">No</span>
      Are you a C programmer?
    </p><p>
      <span><input type="radio" name="q1-yes" value="yes">Yes</span>
      <span><input type="radio" name="q1-yes" value="no">No</span>
      <span><input type="radio" name="q1-yes" value="maybe">Don't know</span>
      Have you read Kernighan and Ritchie?
    </p><p>
      <span><input type="radio" name="q2" value="yes">Yes</span>
      <span><input type="radio" name="q2" value="no">No</span>
      Are you a C++ programmer?
    </p><p>
      <span><input type="radio" name="q2-yes" value="yes">Yes</span>
      <span><input type="radio" name="q2-yes" value="no">No</span>
      <span><input type="radio" name="q2-yes" value="maybe">Don't know</span>
      Have you read Stroustrup?
    </p><p>
      <span><input type="radio" name="q3" value="yes">Yes</span>
      <span><input type="radio" name="q3" value="no">No</span>
      Are you a Ruby programmer?
    </p><p>
      <span><input type="radio" name="q3-yes" value="yes">Yes</span>
      <span><input type="radio" name="q3-yes" value="no">No</span>
      <span><input type="radio" name="q3-yes" value="maybe">Don't know</span>
      Have you read the pickax book?
    </p><p>
      <span><input type="radio" name="q4" value="yes">Yes</span>
      <span><input type="radio" name="q4" value="no">No</span>
      Are you a Lisp programmer?
    </p><p>
      <span><input type="radio" name="q4-yes" value="yes">Yes</span>
      <span><input type="radio" name="q4-yes" value="no">No</span>
      <span><input type="radio" name="q4-yes" value="maybe">Don't know</span>
      Have you read the "Wizard" book?
    </p>
  </div>
</form></div></body>
</html>
